<template>
    <div>
        <div id="Video" class="video-components">
            <div class="video-wrap">
                <!--<video-->
                <!--ref="video"-->
                <!--v-if="videoShow"-->
                <!--class="js_myVideo myVideo"-->
                <!--x5-playsinline="true"-->
                <!--playsinline="true"-->
                <!--webkit-playsinline="true"-->
                <!--x-webkit-airplay="true"-->
                <!--preload-->
                <!--x5-video-player-type="h5"-->
                <!--video-player-type="h5"-->
                <!--x5-video-player-fullscreen='true'-->
                <!--x5-video-ignore-metadata='true'-->
                <!--:loop="videoMsg.loop"-->
                <!--:poster="videoMsg.poster"-->
                <!--:autoplay="videoMsg.autoplay"-->
                <!--x5-video-orientation="portraint"-->
                <!--video-orentation="portraint"-->
                <!--@ended="playEnd">-->
                <!--<source :src="videoMsg.videoUrl" type='video/mp4'>-->
                <!--您的浏览器不支持 video 标签。-->
                <!--</video>-->
                <img class="video-icon" id="videoBtn" @click="videoControls" :src="staticImageUrl('images/video_play_btn.png')" alt=""/>
                <!-- x5-video-player-type="h5"
                        video-player-type="h5"-->
                <video
                        ref="video"
                        class="js_myVideo myVideo"
                        x5-playsinline="true"
                        playsinline="true"
                        webkit-playsinline="true"
                        x-webkit-airplay="true"
                        preload

                        x5-video-player-fullscreen='true'
                        x5-video-ignore-metadata='true'
                        :loop="true"
                      >
                    <source src="https://oss.haokanhaowan.cn/video/look/19072314_dev/f96322e73969cf7363b76b2f28866fd8.mp4" type='video/mp4'>
                    您的浏览器不支持 video 标签。
                </video>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "testvideo",
        methods:{
            videoControls(){
                this.$refs.video.play();
            }
        }
    }
</script>

<style scoped>
    .video-border{
        background: rgba(0,0,0,1);
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }
    .myVideo{
        width: 100%;
        min-height: 100%;
        position: relative;
        z-index: 1;
    }
    .video-wrap{
        position: relative;
        width: 100%;
        height: 100%;
        left:0;
        top: 0;
        overflow: hidden;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .video-icon{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        z-index: 2;
        width: .4rem;
        height: .4rem;
    }
    .video-components{
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        margin: auto;
        height: 100%;
    }
    .video-default-poster{
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        background-image: linear-gradient(to bottom ,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 70%,rgba(0,0,0,.6) 100%);
    }
    .full-video-bg{
        width: 100%;
        height: 100%;
        background-repeat:  no-repeat;
        background-position: center center;
        background-size: cover;
        filter:blur(40px);
        position: absolute;
        left: 0;
        top: 0;
    }
</style>